import echarts from 'echarts'
export default {
  name: 'chartsMix',
  data() {
    return {
      chartCover: {},
      chartUser: {},
      chartUserTrend: {}
    }
  },
  methods: {
    initCover(obj) {
      const data = !obj ? {} : obj
      const {
        mobileMnc = 0, telecomMnc = 0, unicomMnc = 0
      } = data
      const yValues = [mobileMnc, telecomMnc, unicomMnc]
      const colors = ['#80B646', '#009AD2', '#DFA800']
      this.chartCover = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${colors[v.dataIndex]};"></span>
                    ${v.name}
                    <span style="color:${colors[v.dataIndex]};font-weight:500;font-size: 14px">${v.value}</span>
                    %`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '30',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['移动', '电信', '联通'],
          selectedMode: false,
          top: 0,
          left: 'center',
          icon: 'rectangle',
          itemHeight: 14, //修改icon图形大小
          textStyle: {
            fontSize: 12
          }
        },
        yAxis: {
          type: 'category',
          data: ['移动', '电信', '联通'],
          axisTick: {
            show: false
          },
          name: '覆盖率',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9"
            }
          },
        },
        xAxis: {
          type: 'value',
          name: '%',
          min: 0,
          max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          splitLine: {
            show: false
          },
        },
        series: [{
            name: '移动',
            type: 'bar',
            data: []
          },
          {
            name: '电信',
            type: 'bar',
            data: []
          },
          {
            name: '联通',
            type: 'bar',
            data: []
          }, {
            data: yValues,
            type: 'bar',
            showBackground: true,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: function (param) {
                  return colors[param.dataIndex]
                }
              }
            },
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      };
    },
    initUser(data) {
      const color = ['#80B646', '#009AD2']
      this.chartUser = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                    ${v.seriesName}.${v.name}
                    <span style="color:${color[v.componentIndex]};font-weight:500;font-size: 14px">${v.value}</span>
                    %`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['4G', '5G'],
          icon: 'rectangle'
        },
        grid: {
          top: 35,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          name: '%',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            textStyle: {
              color: "#666"
            }
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 10, -20, 0]
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#666"
            }
          },
          data: ['移动', '电信', '联通']
        },
        series: [{
            name: '4G',
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            },
            itemStyle: {
              normal: {
                color: color[0]
              }
            },
            data: [data.mobile4gRatio, data.telecom4gRatio, data.unicom4gRatio]
          },
          {
            name: '5G',
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            },
            itemStyle: {
              normal: {
                color: color[1]
              }
            },
            data: [data.mobile5gRatio, data.telecom5gRatio, data.unicom5gRatio]
          }
        ]
      }
    },
    initUserTrend(list) {
			const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }
      const data = !list ? [] : list
      const xAxisData = data.length > 0 ? data.map(v => v.ptMonth || '') : []
      const yAxisData1 = data.length > 0 ? data.map(v => v.mobileRatio || 0) : []
      const yAxisData2 = data.length > 0 ? data.map(v => v.telecomRatio || 0) : []
      const yAxisData3 = data.length > 0 ? data.map(v => v.unicomRatio || 0) : []
      const color = [
        "#DFBF21",
        "#3DA91C",
        "#60B4FF"
      ]
      this.chartUserTrend = {
        color: color,
        legend: {
          left: 'center',
          top: 10,
          icon: 'rectangle'
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                    ${v.seriesName}.${v.name}
                    <span style="color:${color[v.componentIndex]};font-weight:500;font-size: 14px">${v.value}</span>
                    %`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 35,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#333"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '%',
          min: 0,
          max: 100,
          axisLabel: {
            textStyle: {
              color: "#666"
            }
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 10, -20, 0]
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: "移动",
          type: "line",
          smooth: true,
          showSymbol: false,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[0], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData1
        }, {
          name: "电信",
          type: "line",
          smooth: true,
          showSymbol: false,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[1], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[1], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData2
        }, {
          name: "联通",
          type: "line",
          smooth: true,
          showSymbol: false,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[2],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[2], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[2], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[2], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[2], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData3
        }]
      };
    }
  }
}
